<template>
  <view class="prays">
    <view class="sec1">
      <view class="tabs">
        <view
          :class="['tabli', current === item.id ? 'active' : '']"
          v-for="(item, index) in list"
          :key="index"
          @click="change(item.id)"
        >
          <image class="iconm" :src="imgUrl + item.image" mode="" />
          <view class="txt">{{ item.title }}</view>
        </view>
      </view>
      <view class="detail">
        <image
          class="fmm"
          :src="imgUrl + detailsList.bodhisattva_image"
          mode="aspectFit"
        />
        <view class="rig">
          <h2>{{ detailsList.bodhisattva_title }}</h2>
          <view class="txt" v-html="detailsList.bodhisattva_content"></view>
          <view class="btn" @click="understand">了解更多</view>
        </view>
      </view>
    </view>
    <view class="sec2">
      <view class="stitle">
        <view class="lef">祈福</view>
        <view class="rig" @click="prayor">
          更多
          <image class="errow" src="https://www.123qifu.com/onlineimages/static/errow.png" mode="widthFix" />
        </view>
      </view>
      <view class="lists" v-for="(item, index) in PraysList" :key="index">
        <image
          class="imgs"
          :src="imgUrl + item.cover_image"
          mode="aspectFill"
        />
        <view class="rig">
          <view class="top">
            <h3>{{ item.title }}</h3>
            <h4>{{ item.description }}</h4>
          </view>
          <view class="bott">
            <view class="nums">
              <image
                class="canyIcon"
                src="https://www.123qifu.com/onlineimages/static/canyIcon.png"
                mode="widthFix"
              />
              {{ item.join_num }}人参与
            </view>
            <!-- <view
              class="btns"
              @click="tooffering(item)"
              v-if="item.type == 1"
              >供奉</view
            >
            <view
              class="btns"
              @
              @click="tokaiguang(item)"
              v-if="item.type == 2"
              >开光</view
            > -->
          </view>
        </view>
      </view>
    </view>
    <!-- 了解更多弹出层 -->
    <uni-popup ref="popup" type="center">
      <view class="brief">
        <image
          src="https://www.123qifu.com/onlineimages/static/pray/cha.png"
          class="closImg"
          @click="closClick()"
        ></image>
        <view class="brief_title" v-html="detailsList.bodhisattva_title"></view>
        <scroll-view
          scroll-top="0"
          scroll-y="true"
          class="scroll-Y"
          style="height: 715rpx"
        >
          <view class="briefImg">
            <image
              class="fmimg"
              :src="imgUrl + detailsList.bodhisattva_image"
              mode="aspectFit"
            ></image>
          </view>
          <view class="brief_conten">
            <view v-html="detailsList.bodhisattva_content"></view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    <!-- 开光弹出层 -->
    <uni-popup ref="kaiguang" type="center">
      <view class="duang">
        <view @click="tolongrange(kaigID)">远程开光</view>
        <view @click="tooffline(kaigID)">线下开光</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: "https://www.123qifu.com/",
      current: 0, // tab栏索引
      list: [],
      detailsList: [],
      PraysList: [],
      kaigID: "",
    };
  },
  onLoad() {
    this.change(1);
    this.getList();
  },
  methods: {
    //tab
    async getList() {
      let that = this;
      const res = await that.$myRequest({
        url: "index/getPrayCategory",
        method: "GET",
      });

      that.list = res.data.data;
    },
    async change(id) {
      this.current = id;
      let that = this;
      // 获取菩萨详情
      const res = await that.$myRequest({
        url: "index/getPrayCategoryInfo",
        method: "POST",
        data: {
          id: id,
        },
      });
      if (res.data.code == 1) {
        that.detailsList = res.data.data;
      }
      // 按类型ID获取祈福列表
      const datas = await that.$myRequest({
        url: "index/getPrayByCateId",
        method: "GET",
        data: {
          id: id,
        },
      });
      that.PraysList = datas.data.data.data;
    },
    //在线祈福
    prayor() {
      uni.navigateTo({
        url: "../index/moreqifu/moreqifu",
      });
    },
    // 了解更多
    understand() {
      this.$refs.popup.open();
    },
    // 远程开光
    tolongrange(kaigID) {
      this.$refs.kaiguang.close();
      uni.navigateTo({
        url: "../pray/long-range/long-range?pray_id=" + kaigID + "&type=" + 1,
      });
    },
    // 线下开光
    tooffline(kaigID) {
      this.$refs.kaiguang.close();
      uni.navigateTo({
        url: "../pray/long-range/long-range?pray_id=" + kaigID + "&type=" + 2,
      });
    },
    // 去供奉
    tooffering(item) {
      uni.navigateTo({
        url: "./Offering/Offering?id=" + item.id,
      });
      uni.setStorage({
        key: "gfList",
        data: item,
      });
    },
    // 开光
    tokaiguang(item) {
      this.kaigID = item.id;
      // this.$refs.kaiguang.open();
      uni.navigateTo({
        url: "../pray/long-range/long-range?pray_id=" + this.kaigID,
      });
      uni.setStorage({
        key: "kgList",
        data: item,
      });
    },
    closClick() {
      this.$refs.popup.close();
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  width: 750rpx;
  background-color: #f4f4f4;
}
.prays {
   background-color: #f4f4f4;
  .sec1 {
    width: 100%;
    height: 610rpx;
    margin: 20rpx auto 0;
    background: #ffffff;
    overflow: hidden;
    border-top: 20rpx solid #f4f4f4;
    .tabs {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 25rpx;
      margin-top: 30rpx;
      .tabli {
        position: relative;
        &.active {
          .txt {
            font-weight: 500;
            color: #1b1b1b;
          }
        }
        &.active::after {
          position: absolute;
          content: "";
          width: 48rpx;
          height: 6rpx;
          background: #c52b2e;
          border-radius: 20rpx;
          left: 50%;
          transform: translateX(-50%);
          bottom: -15rpx;
        }
        .iconm {
          display: block;
          width: 60rpx;
          height: 50rpx;
          margin: 0 auto;
        }
        .txt {
          font-size: 26rpx;
          font-weight: 400;
          color: #999999;
          text-align: center;
          margin-top: 15rpx;
        }
      }
    }
    .detail {
      width: 100%;
      box-sizing: border-box;
      padding-left: 27rpx;
      padding-right: 40rpx;
      margin-top: 60rpx;
      display: flex;
      align-items: center;
      .fmm {
        display: block;
        width: 280rpx;
        height: 380rpx;
        margin-right: 18rpx;
      }
      .rig {
        flex: 1;
        height: 380rpx;
        position: relative;
        h2 {
          font-size: 30rpx;
          font-weight: 500;
          color: #373737;
          margin-top: 15rpx;
        }
        .txt {
          font-size: 24rpx;
          font-weight: 400;
          color: #999999;
          margin-top: 23rpx;
          line-height: 35rpx;
          text-align: justify;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 7;
          overflow: hidden;
        }
        .btn {
          width: 120rpx;
          height: 40rpx;
          background: #faf7ee;
          border-radius: 20rpx;
          text-align: center;
          line-height: 40rpx;
          font-size: 20rpx;
          font-weight: 400;
          color: #ab876f;
          position: absolute;
          bottom: 5rpx;
        }
      }
    }
  }
  .sec2 {
    width: 100%;
    min-height: 294rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 0 24rpx;
    overflow: hidden;
    margin-top: 20rpx;
    margin-bottom: 26rpx;
    .stitle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 40rpx auto 12rpx;
      .lef {
        font-size: 34rpx;
        font-weight: 550;
        color: #333333;
        padding-left: 20rpx;
        position: relative;
      }
      .lef::before {
        position: absolute;
        content: "";
        width: 10rpx;
        height: 10rpx;
        background: #c52b2e;
        border-radius: 50%;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
      .rig {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
        .errow {
          display: block;
          width: 12rpx;
          height: 20rpx;
          margin-left: 11rpx;
        }
      }
    }
    .lists {
      width: 100%;
      box-sizing: border-box;
      padding: 28rpx 0;
      border-bottom: 1rpx solid #eee;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .imgs {
        width: 180rpx;
        height: 200rpx;
        margin-right: 18rpx;
        border-radius: 8rpx;
      }
      .rig {
        height: 200rpx;
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
        .top {
          h3 {
            font-size: 30rpx;
            font-weight: 500;
            color: #373737;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
          h4 {
            font-size: 24rpx;
            font-weight: 400;
            color: #999999;
            margin-top: 10rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }
      .bott {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        .nums {
          display: flex;
          align-items: center;
          font-size: 20rpx;
          font-weight: 400;
          color: #999999;
          .canyIcon {
            display: block;
            width: 18rpx;
            height: 18rpx;
            margin-right: 10rpx;
          }
        }
        .btns {
          display: block;
          width: 114rpx;
          height: 50rpx;
          background: #c52b2e;
          border-radius: 25rpx;
          text-align: center;
          line-height: 50rpx;
          font-size: 30rpx;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
    .lists:last-child {
      border-bottom: none;
    }
  }
  .brief {
    width: 690rpx;
    height: 860rpx;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10rpx;
    .closImg {
      position: absolute;
      right: 30rpx;
      top: 30rpx;
      width: 32rpx;
      height: 32rpx;
      margin: 0 0 30rpx;
    }

    .brief_title {
      display: flex;
      justify-content: center;
      color: #333333;
      font-weight: 600;
      font-size: 35rpx;
      border-bottom: 1rpx solid #eee;
      box-sizing: border-box;
      padding: 20rpx 0;
    }

    .briefImg {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 90%;
      margin: 5rpx auto;
      border-radius: 5rpx;
      padding: 10rpx;
      .fmimg {
        // width: 280rpx;
        // height: 400rpx;
      }
    }

    .brief_conten {
      display: flex;
      flex-direction: column;
      width: 90%;
      margin: 0 auto;
      padding: 10rpx 0;
      color: #555;
      font-size: 28rpx;
      line-height: 45rpx;
      text-indent: 2em;
      text-align: justify;
    }
  }
  .duang {
    width: 232rpx;
    height: 180rpx;
    background-color: #ffffff;
    border-radius: 40rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    color: #f7224e;
    position: relative;
    top: 400rpx;
  }
}
</style>
